<template>
    <div>
		<head-top></head-top>
        <br />
        <br />
        <br />
	  <el-form :model="ruleForm" ref="ruleForm" label-width="100px" class="demo-ruleForm">
	    <el-form-item prop="userid">
	     <el-row class="demo-autocomplete">
	     	<el-col :span="2.5">
	     		<el-button type="primary" plain>用户名:</el-button>
	     	</el-col>
	       <el-col span="12">
	         <el-select v-model="ruleForm.userid" filterable placeholder="请选择">
	             <el-option
	               v-for="item in option1"
	               :key="item.id"
	               :label="item.usercode"
	               :value="item.id">
	             </el-option>
	           </el-select>
	       </el-col>
	     </el-row>
	    </el-form-item>
		<el-form-item prop="detailtypename">
		  <el-row class="demo-autocomplete">
			<el-col :span="2.5">
			   	<el-button type="primary"  plain>操作类型:</el-button>
			</el-col>
			<el-col :span="12">
			    <el-select v-model="detailtype" value-key="typeId" filterable placeholder="请选择">
			       <el-option
			          v-for="item in option2"
			          :key="item.configtypevalue"
			          :label="item.configtypename"
			          :value="{detailtypename:item.configtypename,typeId:item.configtypevalue}">
			       </el-option>
			    </el-select>
			 </el-col>
		  </el-row>
		</el-form-item>
		<el-form-item prop="money">
			<el-row class="demo-autocomplete">
				<el-col :span="2.5">
					<el-button type="primary" plain>操作金额:</el-button>
				</el-col>
				<el-col :span="5">
				   <el-input
					 size="medium"
					 placeholder="请输入金额"
					 suffix-icon="el-icon-edit-outline"
					 v-model="ruleForm.money">
				   </el-input>
				 </el-col>
			</el-row>
		</el-form-item>
		<el-form-item prop="memo">
			<el-row class="demo-autocomplete">
				<el-col :span="2.5">
					<el-button type="primary" plain>操作备注:</el-button>
				</el-col>
				<el-col :span="8">
				   <el-input
				     type="textarea"
				     :rows="3"
				     placeholder="请输入内容"
					 v-model="ruleForm.memo"
				     >
				   </el-input>
				 </el-col>
			</el-row>
		</el-form-item>
	    <el-form-item>
	      <el-button type="success" @click="submitForm('ruleForm')">确定</el-button>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
	      <el-button type="primary" @click="resetForm('ruleForm')">重置</el-button>
	    </el-form-item>
	  </el-form>
    </div>
</template>

  <script>
	   import {mapState} from 'vuex'
	   import headTop from '../components/headTop'
	   import {getUserCode,queryByConfigType,updateMoney} from '@/api/getData'

        export default {
			computed: {
			 	...mapState(['adminInfo']),
			 },
			components: {
				headTop,
			},
          data() {
            return {
				ruleForm: {
				          userid: '',
				          money: '',
				          memo: '',
				        },
				detailtype:{detailtypename: '', typeId:''},
				option1: [],
				option2: [],
            };
          },
          watch:{
            $route(to,from){
                if(to.path=="/finance"){
                  this.getUserAccount();
              }
            }
          },
		  mounted(){
			  this.getUserAccount();
		  },
		  methods:{
			  async getUserAccount(){
				  this.option1=await getUserCode();
				  this.option2=await queryByConfigType(1);
			  },
			 async submitForm(formName) {
					let params={userid:this.ruleForm.userid,...this.detailtype,
								money:this.ruleForm.money,memo:this.ruleForm.memo}
			        const res=await updateMoney(params);
					if (res.status == 1) {
						this.$message({
					        type: 'success',
					        message: res.message
					    });
					}else{
						this.$message({
							type: 'error',
							message: res.message
		                    });
					}
				  },
			      resetForm(formName){
			        this.$refs[formName].resetFields();
                   this.detailtype={detailtypename: '', typeId:''};
			      }
		  },
        }
      </script>
	  <style>

	  </style>
